<template>
  <view class="content">
    <mescroll-uni
      ref="mescrollRef"
      @init="mescrollInit"
      @up="upCallback"
      :up="upOption"
      :down="{ use: false }"
    >
      <view class="section-1"> </view>
      <view class="section-0">
        <view class="section-body">
          <view class="list">
            <view class="wrapper">
              <view class="form-item">
                <text class="label">工艺编号</text>
                <u--input
                  placeholderClass="input-placeholder"
                  class="input-body"
                  placeholder="工艺编号"
                  v-model="form.number"
                ></u--input>
              </view>
            </view>
            <view class="wrapper">
              <view class="form-item">
                <text class="label">工艺名称</text>
                <u--input
                  placeholderClass="input-placeholder"
                  class="input-body"
                  placeholder="工艺名称"
                  v-model="form.name"
                ></u--input>
              </view>
            </view>
            <view class="wrapper">
              <view class="form-item">
                <text class="label">类型</text>
                <u--input
                  placeholderClass="input-placeholder"
                  class="input-body"
                  placeholder="类型"
                  v-model="form.type"
                ></u--input>
              </view>
            </view>
            <view class="wrapper">
              <view class="form-item">
                <text class="label">状态</text>
                <u--input
                  placeholderClass="input-placeholder"
                  class="input-body state"
                  placeholder="状态"
                  :disabled="true"
                  v-model="form.state"
                ></u--input>
              </view>
            </view>

            <view class="wrappers">
              <view class="form-item">
                <text class="label pic">照片</text>
                <view class="outbox">
                  <!-- <text class="cha" v-if="showlist" @click="showUs">×</text> -->
                  <u-upload
                    :fileList="fileList"
                    :previewFullImage="true"
                    @afterRead="afterRead($event, 'fileList')"
                    @delete="deleteMedia($event, 'fileList')"
                    multiple
                    :maxCount="1"
                  ></u-upload>
                  <!-- <img :src="meetingPic" class="usimg" v-if="showlist" /> -->
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="preservation">
        <u-button
          class="preservabtn"
          type="primary"
          text="保存"
          @click="submit"
        ></u-button>
      </view>
    </mescroll-uni>
  </view>
</template>

<script>
import { uploadUrl } from "@/baseUrl.js";
import { addStandardProcess } from "@/api/statistics.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      form: {
        id: "",
        number: "",
        name: "",
        type: "",
        state: "",
      },
      state: "",
      file_id: "",
      file_path: "",
      project_id: "",
      id: "",
      showlist: false,
      meetingPic: "",
      curBoard: 1,
      list: [],
      contentList: [],
      expandList: [],
      fileList: [],
      upOption: {
        textNoMore: "-- 没有更多了 --",
      },
    };
  },

  computed: {
    ...mapGetters({
      curProject: "system/getCurProject",
    }),
  },
  methods: {
    //提交表单
    submit() {
      if (this.form.state == "已完成") {
        this.state = 2;
      } else if (this.form.state == "未完成") {
        this.state = 1;
      }
      // if (this.form.number == "") {
      //   uni.showToast({
      //     title: "请填写工艺编号",
      //     duration: 1000,
      //     icon: "error",
      //   });
      //   return;
      // }
      // if (this.form.name == "") {
      //   uni.showToast({
      //     title: "请填写工艺名称",
      //     duration: 1000,
      //     icon: "error",
      //   });
      //   return;
      // }
      // if (this.form.type == "") {
      //   uni.showToast({
      //     title: "请填写工艺类型",
      //     duration: 1000,
      //     icon: "error",
      //   });
      //   return;
      // }
      uni.showLoading({
        title: "加载中...",
      });
      addStandardProcess({
        id: this.form.id,
        project_id: this.project_id,
        name: this.form.name,
        type: this.form.type,
        number: this.form.number,
        status: this.state,
        file_id: this.file_id,
      }).then((res) => {
        if (res.data.code == 1 || res.data.code == 200) {
          console.log(res);
          uni.showToast({
            title: "保存成功",
            duration: 1000,
            icon: "success",
          });
          for (let key in this.form) {
            this.form[key] = "";
          }
          uni.hideLoading();
          this.Back();
        } else {
          uni.showToast({
            title: "保存失败，请重试",
            duration: 1000,
            icon: "error",
          });
          uni.hideLoading();
        }
      });
    },
    Back() {
      uni.$emit("refreshData");
      uni.navigateBack({
        delta: 1,
      });
    },
    // showUs() {
    //   console.log(this.show);
    //   this.showlist = false;
    //   this.form.state = "未完成";
    //   this.file_id = "";
    // },
    // 删除图片
    deleteMedia(event) {
      this[`fileList`].splice(event.index, 1);
      this.form.state = "未完成";
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList`].length;
      lists.map((item) => {
        this[`fileList`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        this.file_id = result.data.file_id;
        this.file_path = result.data.file_path;
        console.log(result);
        if (result.code == 1) {
          this.form.state = "已完成";
        } else {
          this.form.state = "未完成";
        }
        let item = this[`fileList`][fileListLen];
        this[`fileList`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result.data.file_id,
            file_path: result.data.file_path,
          })
        );
        fileListLen++;
      }
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: uploadUrl, // 仅为示例，非真实的接口地址
          filePath: url,
          name: "file",
          formData: {
            user: "test",
          },
          success: (res) => {
            setTimeout(() => {
              resolve(JSON.parse(res.data));
            }, 1000);
          },
        });
      });
    },
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    //隐藏加载状态
    upCallback() {
      this.mescroll.endErr();
    },

    onLoad(data) {
      this.project_id = this.curProject.id;
      console.log(this.project_id);
      var obj = JSON.parse(data.params);
      console.log(obj, 111);
      this.form.id = obj.id;
      this.form.number = obj.number;
      this.form.name = obj.name;
      this.form.type = obj.type;
      // this.fileList.url = obj.file_path;
      // this.fileList.file_path=obj.file_path
      // this.file_id = obj.file_id;
      // if (this.meetingPic == null) {
      //   this.showlist = false;
      // } else {
      //   this.showlist = true;
      // }
      let arr = {};
      if (obj.file_path != "" && obj.file_path != null) {
        arr.url = obj.file_path;
        arr.file_path = obj.file_path;
        arr.file_id = obj.file_id;
        this.fileList.push(arr);
        console.log(this.fileList, 12355565);
      }
      if (obj.status == 1) {
        this.form.state = "未完成";
      } else if (obj.status == 2) {
        this.form.state = "已完成";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.out-content {
  background-color: #2e5efe;
  .section-1 {
    width: 100%;
    background-color: #1534ce;
    border-top-left-radius: 50rpx;
    border-top-right-radius: 50rpx;
    overflow: hidden;

    .section-body {
      width: 670rpx;
      margin-left: 40rpx;
      margin-right: 40rpx;
      padding-bottom: 50rpx;
      padding-top: 20rpx;
      background-color: #1534ce;
      background-size: cover;
      background-repeat: no-repeat;
      overflow: hidden;
      box-sizing: border-box;

      .item {
        width: 50%;
        float: left;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        height: 100rpx;
        position: relative;
        padding-top: 20rpx;
        padding-bottom: 20rpx;

        .shape {
          width: 4rpx;
          height: 84rpx;
          background-image: linear-gradient(
            rgba(#3658f2, 0.3) 0%,
            #3658f2 30%,
            #3658f2 70%,
            rgba(#3658f2, 0.3) 100%
          );
          position: absolute;
          right: 0;
          top: 28rpx;
        }

        .shape2 {
          height: 4rpx;
          width: 172rpx;
          background-image: linear-gradient(
            90deg,
            rgba(#3658f2, 0.3) 0%,
            #3658f2 30%,
            #3658f2 70%,
            rgba(#3658f2, 0.3) 100%
          );
          position: absolute;
          left: 0;
          right: 0;
          margin: 0 auto;
          bottom: -2rpx;
        }

        .top {
          width: 100%;
          text-align: center;
          font-size: 16rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: #95c4fa;
        }

        .bottom {
          width: 100%;
          text-align: center;
          font-size: 58rpx;
          font-weight: bold;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: #ffde00;

          text {
            font-size: 26rpx;
            font-weight: normal;
            letter-spacing: 0rpx;
            color: #87c6ff;
          }
        }
      }
    }
  }
}
.wrappers {
  width: 100%;
  border-radius: 35rpx;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
  padding: 28rpx 40rpx;
  padding-top: 15rpx;
  margin-bottom: 40rpx;
  font-size: 27rpx;
  height: 192rpx;
  .pic {
    margin-top: 57.6rpx !important;
  }
  .outbox {
    display: flex;
    position: relative;
    width: 153.6rpx !important;
    height: 153.6rpx !important;
    background-color: #f1edf1;
    margin-left: 132.5rpx;
    margin-top: 6rpx !important;
    .usimg {
      position: absolute;
      z-index: 999;
      width: 153.6rpx;
      height: 153.6rpx;
    }
    .cha {
      position: absolute;
      left: 140rpx;
      top: -38rpx;
      font-size: 52rpx;
      color: red;
    }
  }
}

.wrapper {
  width: 100%;
  border-radius: 35rpx;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
  padding: 28rpx 40rpx;
  padding-top: 15rpx;
  margin-bottom: 40rpx;
  font-size: 27rpx;
  .title {
    margin-bottom: 38rpx;
    .workmanshipIndex {
      margin-left: 10rpx;
    }
    .workmanshipNumber {
      margin-left: 92rpx;
    }
    .outedit {
      .edit {
        color: #0535d6;
        width: 46rpx;
        height: 46rpx;
        font-size: 23rpx;
        margin-left: 111rpx;
      }
    }
  }
  .workmanshipLeft {
    border: 2rpx solid #efefef;
    width: 134rpx;
    height: 113rpx;
    position: absolute;
    margin-top: -11.5rpx;
    padding-top: 19rpx;
    background: #efefef;
    border-radius: 19rpx;
    .pictureTop {
      color: #b8b8b8;
      margin-top: 10px;
      overflow: hidden;
      margin-left: 29rpx;
      font-size: 38rpx;
    }
    .pictureBottom {
      color: #b8b8b8;
      margin-left: 29rpx;
      font-size: 38rpx;
    }
  }
  .workmanshipRight {
    margin-left: 195rpx;
  }
}
.section-0 {
  width: 100%;
  position: relative;
  top: -50rpx;
  z-index: 10;
  background-color: #2e5efe;
  margin-top: 17rpx;
  .section-body {
    width: 100%;
    height: 100%;
    margin-top: 50rpx;
    border-top-left-radius: 50rpx;
    border-top-right-radius: 50rpx;
    background-color: #fff;
    overflow: hidden;
    padding-top: 46rpx;
    .form {
      width: 100%;
      padding: 0 42rpx;
      padding-top: 15rpx;
      box-sizing: border-box;

      .form-time {
        width: 662rpx;
        min-height: 48rpx;
        margin: 0 auto;
        margin-bottom: 9rpx;

        @include clear;
        .label {
          float: left;
          width: 134rpx;
          height: 48rpx;
          text-align: center;
          line-height: 44rpx;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: #1534ce;
        }
        .wrapper {
          float: left;
          width: calc(100% - 134rpx);
          line-height: 48rpx;
          .item {
            float: left;
            display: inline-block;
            height: 48rpx;
            border-radius: 35rpx;
            padding: 0 20rpx;
            background-color: #395cf5;
            text-align: center;
            font-size: 26rpx;
            line-height: 48rpx;
            color: #fff;
            margin-left: 10rpx;
            transition: 0.3s ease;
            margin-bottom: 16rpx;
          }
          .item__active {
            background-color: #1534ce;
          }
        }
      }
    }
    .label {
      margin-left: -32rpx;
      margin-top: 21rpx;
      color: #000 !important;
      font-weight: bolder;
    }
    .input-body {
      height: 55.6rpx !important;
      width: 501rpx !important;
      margin-top: 21rpx;
      border: 1px solid #1534ce !important;
      border-radius: 28.8rpx !important;
      margin-top: 13.5rpx !important;
    }
    .tab {
      width: 100%;
      height: 80rpx;
      @include clear();
      background-color: #1534ce;
      .item {
        width: 50%;
        float: left;
        height: 80rpx;
        background-color: #1534ce;
        position: relative;
        .label {
          height: 80rpx;
          line-height: 80rpx;
          position: relative;
          z-index: 10;
          box-sizing: border-box;
          text-align: center;
          width: 100%;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: #ffffff;
        }
        .shape {
          z-index: 1;
          width: 50rpx;
          height: 50rpx;
          position: absolute;
          bottom: 0;
          left: -50rpx;
          background: #000;
          display: none;
          background-color: #fff;
          overflow: hidden;
          .shape-body {
            width: 50rpx;
            height: 50rpx;
            background-color: #1534ce;
            border-bottom-right-radius: 40rpx;
          }
        }
        .shape-mirrow {
          z-index: 1;
          left: 0;
          display: none;
          .shape-body {
            border-bottom-right-radius: 0rpx;
            border-bottom-left-radius: 40rpx;
          }
        }
      }
      .item__active {
        border-top-left-radius: 40rpx;
        border-top-right-radius: 40rpx;
        background-color: #fff;
        .label {
          color: #46464a;
        }
        .shape {
          display: block;
        }
        .shape-mirrow {
          display: none;
        }
      }
      .item__active_next {
        border-bottom-right-radius: 50rpx;
        .shape {
          display: none;
        }
        .shape-mirrow {
          display: block;
        }
      }
    }
    .list {
      width: 670rpx;
      box-sizing: border-box;
      margin-left: 40rpx;
      .form-item {
        width: 662rpx;
        height: 48rpx;
        border-radius: 20rpx;
        margin: 0 auto;
        margin-bottom: 25rpx;

        @include clear();
        .label {
          float: left;
          width: 134rpx;
          height: 48rpx;
          text-align: center;
          line-height: 44rpx;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: #1534ce;
        }
        .state {
          background-color: #e0e0e0 !important;
        }
        .input-body {
          box-sizing: border-box;
          height: 44rpx;
          padding: 0 !important;
          border: 1px solid #1534ce;
          padding-left: 30rpx !important;
          padding-right: 30rpx !important;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: rgba(0, 0, 0, 0.7);
        }
        .input-placeholder {
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: rgba(0, 0, 0, 0.5);
        }
      }
      .item {
        width: 100%;
        border-bottom: solid 2rpx #f2f2f0;

        .parent {
          width: 100%;
          @include clear();
          .name {
            width: 620rpx;
            line-height: 30rpx;
            padding: 26rpx 0;
            font-size: 26rpx;
            font-weight: normal;
            font-stretch: normal;

            margin-left: 67rpx;
            letter-spacing: 2rpx;
            color: #3b3c40;
            word-break: break-all;
          }

          .count {
            float: right;
            min-width: 46rpx;
            height: 46rpx;
            margin-top: 18rpx;
            border-radius: 28rpx;
            line-height: 46rpx;
            text-align: center;
            font-size: 26rpx;
            font-weight: bold;
            color: #395cf5;
            background: #ffde00;
            // margin-right: 40rpx;
            text {
              font-size: 16rpx;
            }
          }

          .action {
            float: left;
            width: 32rpx;
            margin-right: 18rpx;
            height: 100%;
            line-height: 0rpx;
            color: #3b3c40;
            .iconfont {
              position: relative;
              top: 38rpx;
              font-size: 32rpx;
              transition: 0.2s ease;
              transform: rotate(90deg);
            }
          }
        }

        .child {
          width: 750rpx;
          margin-left: -40rpx;
          background: #f2f2fa;

          .child-item {
            width: 620rpx;
            margin-left: 90rpx;
            border-bottom: 2rpx solid #e3e8f5;

            &:last-child {
              border-bottom: none;
            }

            .top {
              width: 100%;
              overflow: hidden;
              height: 100rpx;
              margin-left: 15.3rpx;

              .name {
                float: left;
                width: calc(100% - 40rpx);
                height: 40rpx;
                line-height: 40rpx;
                color: #3b3c40;
                font-size: 26rpx;
                padding: 30rpx 0;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
              }

              .action {
                width: 40rpx;
                height: 100rpx;
                line-height: 100rpx;
                float: right;
                text-align: right;
                .iconfont {
                  font-size: 32rpx;
                  color: #7f98ae;
                }
              }
            }
          }
        }
      }

      .item__expand {
        .parent {
          .action {
            .iconfont {
              transform: rotate(-90deg);
            }
          }
        }

        .child {
          box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(0, 0, 0, 0.03) inset;
        }
      }
    }

    .actions {
      width: 100%;
      height: 50rpx;
      margin-top: 29rpx;
      padding-bottom: 40rpx;
      display: flex;
      justify-content: space-between;

      .action {
        width: 288rpx;
        height: 48rpx;
        background-color: #395cf5;
        border-radius: 20rpx;
        text-align: center;
        line-height: 48rpx;
        font-size: 26rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 48rpx;
        color: #ffffff;

        text {
          &:first-child {
            margin-right: 20rpx;
          }
        }
      }

      .search {
        background-color: #1534ce;
      }
    }

    .total {
      box-sizing: border-box;
      padding: 0 70rpx;
      height: 80rpx;
      line-height: 70rpx;
      font-size: 22rpx;
      font-weight: normal;
      font-stretch: normal;
      line-height: 80rpx;
      letter-spacing: 0rpx;
      color: #3b3c40;
    }

    .charts {
      width: 100%;
      box-sizing: border-box;
      height: 315rpx;
      padding: 0 70rpx;
      padding-left: calc(70rpx - 15px);
      margin-bottom: 30rpx;
      #echarts {
        width: 100%;
        height: 100%;
      }
    }

    .top-tab {
      width: 670rpx;
      margin-left: 40rpx;
      height: 52rpx;
      line-height: 52rpx;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 30rpx;
      margin-top: 15rpx;
      border-bottom: solid 3rpx #f2f2f0;

      .item {
        font-size: 26rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 50rpx;
        letter-spacing: 0rpx;
        color: #d8d8d5;
        position: relative;

        .shape {
          opacity: 0;
          transform: translateY(6rpx);
          position: absolute;
          bottom: -6rpx;
          width: 100%;
          height: 8rpx;
          background-color: #1534ce;
          border-radius: 8rpx;
          transition: 0.3s ease;
        }
      }

      .item__active {
        color: #3b3c40;

        .shape {
          opacity: 1;
          transform: translateY(0rpx);
        }
      }
    }
  }
}
.preservation {
  width: 100%;
  height: 115rpx;
  position: fixed;
  bottom: 0rpx;
  right: 0;
  padding-top: 21rpx;
  box-shadow: 0 0 10rpx 10rpx rgba(#bcbcb5, 0.17);
  .preservabtn {
    width: 75%;
    margin: auto;
  }
}
</style>
